<script lang="ts" setup>
import { Users, Building2, Book, ChevronDown } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router';
import type { Menu } from './types';

const router = useRouter();
const route = useRoute();

const menus = [
  {
    title: '用户管理',
    key: 'user-management',
    icon: Users,
    path: '/system/user-management',
  },
  {
    title: '部门管理',
    key: 'department-management',
    icon: Building2,
    path: '/system/department-management',
  },
  {
    title: '字典管理',
    key: 'dictionary-management',
    icon: Book,
    path: '/system/dictionary-management',
  },
];
const currentKey = computed(() => route.path.split('/')[2] || undefined);

function handleClick(menu: Menu) {
  router.push(menu.path);
}

const getMenuButtonClass = computed(() => (key: string) => ({
  'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground': key === currentKey.value,
}));
</script>

<template>
  <Collapsible default-open class="group/collapsible">
    <SidebarGroup>
      <SidebarGroupLabel as-child>
        <CollapsibleTrigger>
          系统管理
          <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
        </CollapsibleTrigger>
      </SidebarGroupLabel>
      <CollapsibleContent>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem v-for="item of menus" :key="item.key" @click="handleClick(item)">
              <SidebarMenuButton as-child :class="getMenuButtonClass(item.key)">
                <span>
                  <component :is="item.icon" />
                  <span>{{ item.title }}</span>
                </span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </CollapsibleContent>
    </SidebarGroup>
  </Collapsible>
</template>
